@import "reset";
@import "footer";
@import "header";
@import "../utils/iconfont.css";

@function getvw($wid){
    @return $wid/750*100 + vw;
}

main{
    .message{
        width: 96vw;
        margin: 0 auto;
        margin-top: getvw(30);
        .mes-top{
            display: flex;
            justify-content: space-between;
            .mes-top-right{
                display: flex;
                align-items: center;
                .img-logo{
                    width: getvw(54);
                }
                span{
                    font-size: getvw(40);
                }
            }
            .mes-top-left{
                height: getvw(70);
                display: flex;
                align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(40);
                }
            }
        }
        .mes-list{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: getvw(40) 0 getvw(50);
            .img-content{
                width: getvw(133);
                background-color: #000;
            }
        }
    }
}

header{
    .banner{
        width: 100vw;
        overflow: hidden;
        margin: getvw(20) 0;
        .banner-box{
            width: 400vw;
            margin: 0 auto;
            display: flex;
            animation: banner 6s ease infinite alternate;
            .banner-group{
                display: flex;
                justify-content: space-between;
                width: 96vw;
                margin: 0 2vw;
                .ban-group-item{
                    width: getvw(150);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        }
        .banner-circle-group{
            display: flex;
            justify-content: space-between;
            width: getvw(95);
            margin: getvw(12) auto 0;
            .circle{
                width: getvw(20);
                height: getvw(20);
                border-radius: getvw(10);
                background-color: #ffc9a1;
                &:first-child{
                    animation: circleOne 6s infinite alternate;
                }
                &:nth-child(2){
                    animation: circleTwo 6s infinite alternate;
                }
                &:nth-child(3){
                    animation: circleThree 6s infinite alternate;
                }
                &:nth-child(4){
                    animation: circleFour 6s infinite alternate;
                }
            }
        }
    }
}

@keyframes banner{
    0%{
        transform: translateX(0);
    }
    10%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100vw);
    }
    40%{
        transform: translateX(-100vw);
    }
    60%{
        transform: translateX(-200vw);
    }
    70%{
        transform: translateX(-200vw);
    }
    90%{
        transform: translateX(-300vw);
    }
    100%{
        transform: translateX(-300vw);
    }
}

@keyframes circleOne{
    0%{
        background-color: #ff9344;
    }
    10%{
        background-color: #ff9344;
    }
    11%{
        background-color: #ffc9a1;
    }
    100%{
        background-color: #ffc9a1;
    }
}
@keyframes circleTwo{
    0%{
        background-color: #ffc9a1;
    }
    30%{
        background-color: #ff9344;
    }
    40%{
        background-color: #ff9344;
    }
    41%{
        background-color: #ffc9a1;
    }
    100%{
        background-color: #ffc9a1;
    }
}
@keyframes circleThree{
    0%{
        background-color: #ffc9a1;
    }
    60%{
        background-color: #ff9344;
    }
    70%{
        background-color: #ff9344;
    }
    71%{
        background-color: #ffc9a1;
    }
    100%{
        background-color: #ffc9a1;
    }
}
@keyframes circleFour{
    0%{
        background-color: #ffc9a1;
    }
    90%{
        background-color: #ff9344;
    }
    100%{
        background-color: #ff9344;
    }
}